<!--
 * @Description: 侧边栏菜单
 * @Date: 2021-04-16 10:59:31 +0800
 * @Author: JackChou
 * @LastEditTime: 2021-04-16 14:46:12 +0800
 * @LastEditors: JackChou
-->
<template>
  <div>
    <!-- router 属性开启以 index 为路径的跳转 -->
    <el-menu :default-active="activeMenu" :collapse="false" router :default-openeds="defaultOpenedsRef">
      <template v-for="menu in menuListRef" :key="menu.id">
        <el-submenu v-if="menu.type === 'menu'" :index="menu.id">
          <template #title>
            <span>{{ menu.name }}</span>
          </template>
          <template v-for="submenu in menu.children" :key="submenu.id">
            <el-menu-item v-if="submenu.type === 'path'" :index="submenu.path">
              {{ submenu.name }}
            </el-menu-item>
            <el-submenu v-if="submenu.type === 'menu'" :index="submenu.id">
              <template #title>
                {{ submenu.name }}
              </template>
              <el-menu-item v-for="item in submenu.children" :key="item.id" :index="item.path">
                {{ item.name }}
              </el-menu-item>
            </el-submenu>
          </template>
        </el-submenu>
        <el-menu-item v-if="menu.type === 'path'" :index="menu.path">
          {{ menu.name }}
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>
<script>
import { ref, reactive, watch, computed } from 'vue'
import { useRoute } from 'vue-router'
// 默认展开的子菜单的 index
const defaultOpeneds = ['ajfakfkaf', 'a3easd43fakwer']
const menuList = [
  {
    type: 'path',
    name: '首页',
    path: '/',
    id: 'homeakfaketwrwr32',
  },
  {
    type: 'menu',
    id: 'ajfakfkaf',
    name: '系统设置',
    children: [
      {
        type: 'path',
        path: '/role',
        name: '角色管理',
        id: 'alfkjakfakwer',
      },
      {
        type: 'path',
        path: '/menu',
        name: '菜单配置',
        id: 'alfk343fakwer',
      },
      {
        type: 'menu',
        name: '二级菜单',
        id: 'a3easd43fakwer',
        children: [
          {
            type: 'path',
            path: '/test',
            name: '子菜单',
            id: 'a3e23fsfd43fakwer',
          },
        ],
      },
    ],
  },
  {
    type: 'path',
    path: '/settings',
    name: '其他菜单',
    id: 'yyte2alkfakfjakfj',
  },
]
export default {
  name: 'Aside',
  components: {},
  setup(props, { emit, attrs, slots }) {
    const route = useRoute()
    const menuListRef = ref(menuList)
    const activeMenu = ref(route.path)
    const defaultOpenedsRef = ref(defaultOpeneds)
    return { menuListRef, defaultOpenedsRef, activeMenu }
  },
}
</script>
<style lang="scss">
.el-menu {
  border: none;
}
</style>
